/**
 * 生命周期练习 - 电子时钟
 */
import React, { Component } from 'react'
import moment from 'moment';

export default class Clock extends Component {

  state = {
    timeStr: '2022-09-10 10:10:10'
  }

  render() {
    return (
      <div style={{border:'solid 1px #666', display: 'inline-block', padding: '20px 30px'}}>
        {this.state.timeStr}
      </div>
    )
  }

  //组件挂载完毕的钩子 
  componentDidMount(){
    console.log('组件挂载完毕~~');
    //定时器 
    this.timer = setInterval(() => {  
      //更新状态 
      this.setState({   
        timeStr: moment().format('YYYY-MM-DD HH:mm:ss')
      })
    }, 1000);
  }

  //组件卸载之前的钩子
  componentWillUnmount(){
    console.log('组件将要卸载~~');
    //清除定时器
    clearInterval(this.timer);
  }

}
